<template>
	
	<view class="default-box mb-3 msg-box" @click="navMessage">
		<view class="titlebar text-gray mb-2">
			<view class="title">最近消息</view>
			<view class="content">
				<text>{{ messageTitle }}</text>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		
		<view class="message-row" v-for="(item, index) in messageList" :key="index">
			<text v-if="item.type === 'report' && item.status === '1'" class="icon cuIcon-loading2 text-green"></text>
			<text v-if="item.type === 'report' && item.status === '2'" class="icon cuIcon-check text-blue"></text>
			<text v-if="item.type === 'mission'" class="icon cuIcon-infofill text-red"></text>
			<text v-if="item.type === 'notice'" class="icon cuIcon-infofill text-red"></text>
			<text v-if="item.type === 'statistics'" class="icon cuIcon-form text-blue"></text>
			<text v-if="item.type === 'rectification'" class="icon cuIcon-infofill text-blue"></text>
			
			<text class="content small-text text-ellipsis-1">
				{{ item.title }}
			</text>
		</view>
		
		<view class="text-gray small-text" style="padding-left: 46rpx" v-if="messageList.length > 0 && messageList.length < 3">
			没有更多了
		</view>
		<view class="empty" v-if="messageList.length === 0">
			<image :src="env.H5_RELATIVE_URL + '/static/images/empty-message-ho.png'" mode="aspectFit"></image>
		</view>
		
	</view>
	
	<view v-for="(item, index) in mockData" :key="index">
		<OptionMenu
			:icon="item.icon"
			:title="item.title"
			:content="item.content"
			:page="item.page"
		/>
	</view>
	<view v-if="hasIntersection(userInfo.permissions, ['group', 'area', 'city'])" style="padding-bottom: 88rpx;">
		<OptionMenu
			icon="/static/images/mission_1.png"
			title="组任务总览"
			content="查看所有负责任务的进展"
			page="/pages/mission/grouplist"
		/>
	</view>
	
</template>

<script setup lang="ts">
import { getUnreadCount } from "@/api/user.js"
import { router } from "@/router"
import OptionMenu from "@/components/OptionMenu.vue"
import { onMounted, ref, type Ref, defineExpose, reactive } from "vue";
import { getMessage } from "@/api/user.js"
import store from "@/store/index.js"
import env from "@/env"
import { hasIntersection } from "@/utils/base"

interface IMenu {
	title: string,
	content: string,
	icon: any,
	page: string
}
interface IMessage {
	title: string
	type: string
	status: string
}
const userInfo = reactive(store.getters.userInfo)
const messageTitle:Ref<string> = ref("暂无新消息")
const mockData = ref([
	{
		"title": "任务一览",
		"content": "轻松便捷浏览",
		"icon": "/static/images/mission_1.png",
		"page": "/pages/mission/list"
	},
	{
		"title": "日程表",
		"content": "快捷查询添加",
		"icon": "/static/images/schedule_1.png",
		"page": "/pages/schedule/schedule"
	},
	{
		"title": "责任学校",
		"content": "安全保障无忧",
		"icon": "/static/images/school_1.png",
		"page": "/pages/school/list"
	}
] as IMenu[])
const mockMessage:Ref<IMessage[]> = ref([
	{
		type: "mission",
		title: "宁波市实验学校20230928报告生成完成报告生成完成"
	},
	{
		type: "mission",
		title: "宁波市实验学校20231104报告生成中"
	},
	{
		type: "mission",
		title: "宁波市实验学校食堂发生中毒事件"
	}
] as IMessage[])

const navMessage = ():void => {
	router.push("/pages/user/message")
}
const typeMap = {
	"1": "mission",
	"2": "report",
	"3": "notice",
	"4": "statistics",
	"5": "rectification"
}

const messageList:Ref<IMessage[]> = ref([] as IMessage[])
const init = ():void => {
	getUnreadCount({
		type: "1"
	})
		.then((res:any) => {
			console.log(res)
			if (res.unreadCount > 0) {
				messageTitle.value = res.unreadCount + "条新消息"
			} else {
				messageTitle.value = "暂无新消息"
			}
			getMessage({
				pageNum: 1,
				pageSize: 3,
				status: "1"
			}).then((res:any) => {
				const rows = res.rows
				
				let data:IMessage[] = []
				for (let v of rows) {
					data.push({
						title: v.msgTitle,
						type: typeMap[v.type],
						status: v.generateStatus
					})
				}
				console.log("data", data)
				messageList.value = data
			})
		})
		.catch((err) => {
			console.log("err", err)
		})
	
}
defineExpose({ init })
onMounted(() => {
	init()
})

</script>

<style lang="stylus" scoped>
.msg-box
	min-height: 280rpx
// 	width 100%
// 	min-height 200rpx
// 	background-color #fff
// 	border-radius 12rpx
// 	box-sizing border-box
// 	padding 24rpx 28rpx
.title-row
	display flex
	justify-content space-between margin-bottom 36rpx
	align-items: center
	// .school-name, .datetime
.content-row
	// margin-bottom 44rpx
	padding 0 14rpx
	
.titlebar
	display: flex
	justify-content: space-between
	align-items: center
	font-size 34rpx
.message-row
	display: flex
	font-size 34rpx
	align-items: center
	.icon
		margin-right 12rpx
.message-row:not(:last-child)
	margin-bottom 10rpx
	
.empty
		height: 134rpx
		display: flex
		align-items: center
		justify-content: center
		overflow: hidden
		image
			height: 100%
</style>